import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
import {message, Popconfirm} from "antd";
import React from "react";
import {addRole, deleteRole, pageRole, updateRoleById} from "@/pages/system/role/api";
import RoleEditModel from "@/pages/system/role/components/RoleEditModel";
import {RoleAssignModel} from "@/pages/system/role/components/RoleAssignModel";

const RoleManager: React.FC = () => {

  const actionRef = React.useRef<ActionType>();

  /*角色表格表头*/
  const columns: ProColumns<any>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '名称',
      dataIndex: 'name',
      ellipsis: true,
      key: 'name',
    },
    {
      title: '权限字符串',
      dataIndex: 'roleKey',
      ellipsis: true,
      key: 'roleKey',
    },
    {
      title: '排列顺序',
      dataIndex: 'roleSort',
      ellipsis: true,
      hideInSearch: true,
      key: 'roleSort',
    },
    {
      title: '状态',
      dataIndex: 'status',
      ellipsis: true,
      key: 'status',
      valueType: 'select',
      valueEnum: {
        "0": {
          text: '正常',
          status: 'Success',
        },
        "1": {
          text: '停用',
          status: 'Error',
        },
      },
    },
    {
      title: '创建时间',
      dataIndex: 'updatedAt',
      ellipsis: true,
      tooltip: '创建时间',
      key: 'updatedAt',
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 200,
      render: (text, record, _, action) => [
        <RoleEditModel
          isAdd={false}
          role={record} key={`update${record.id}`}
          triggerButton={
            <a key="editable">编辑</a>
          }
          onSubmit={async (values: API.IRole) => {
            values.id = record.id
            values.version = record.version
            const {data} = await updateRoleById(values)
            if (data) {
              actionRef.current?.reload()
              message.success('修改成功')
            }
            return data
          }}
        />,
        <Popconfirm
          key="delete"
          title={`确认删除`}
          description={`确认删除【${record.name}】角色吗？`}
          okText="确认"
          cancelText="取消"
          onConfirm={async () => {
            const {data} = await deleteRole(record.id)
            if (data) {
              actionRef.current?.reload()
              message.success('删除成功')
            }
          }}
        >
          <a target="_blank" rel="noopener noreferrer" key="delete">删除</a>
        </Popconfirm>,
        <RoleAssignModel
          role={record}
          key={`assign${record.id}`}
          onSubmit={async (values) => {
            console.log('修改数据:', values)
            return false
          }}
          triggerButton={<a>权限</a>}/>
      ],
    },
  ]

  return (
    <ProTable<API.IRole, API.PageParams>
      headerTitle={"角色列表"}
      actionRef={actionRef}
      rowKey="key"
      defaultSize={"middle"}
      search={{
        labelWidth: "auto",
        span: 6,
      }}
      toolBarRender={() => [
        <RoleEditModel
          isAdd={true}
          key={`add`}
          onSubmit={async (values: API.IRole) => {
            const {data} = await addRole(values)
            if (data) {
              actionRef.current?.reload()
              message.success('添加成功')
            }
            return data
          }}
        />
      ]}
      pagination={{
        pageSize: 10,
      } as any}
      size={"small"}
      request={async (params, sort, filter) => {
        const {data} = await pageRole(params)
        return data
      }}
      columns={columns}
    />
  )
};

export default RoleManager;
